<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { createNonEmptyRule, ModalForm, request, statusSelect } from '../../../utils';
import { FormInstance, FormRules } from 'element-plus';

type Dict = {
  dictName?: string
  dictType?: string
  status?: boolean
  remark?: string
}

const props = defineProps<{ row?: Dict }>()

const form = ref<Dict>({})
const formRef = ref<FormInstance>()

const rules: FormRules<Dict> = {
  dictName: createNonEmptyRule('字典名称不能为空'),
  dictType: createNonEmptyRule('字典类型不能为空')
}

onMounted(() => {
  const { row } = props
  form.value = row ? { ...row } : { status: true }
})

defineExpose<ModalForm>({
  validate () {
    return formRef.value?.validate()
  },
  submit () {
    return request.post(`/dict/${props.row ? 'update' : 'add'}`, form.value)
  }
})
</script>

<template>
  <ElForm ref="formRef" label-width="6em" :model="form" :rules="rules">
    <ElFormItem label="字典名称" prop="dictName">
      <ElInput :maxlength="20" v-model="form.dictName" />
    </ElFormItem>
    <ElFormItem label="字典类型" prop="dictType">
      <ElInput :maxlength="30" v-model="form.dictType" />
    </ElFormItem>
    <ElFormItem label="状态">
      <ElRadioGroup v-model="form.status">
        <ElRadio v-for="_ in statusSelect" :value="_.value">{{ _.label }}</ElRadio>
      </ElRadioGroup>
    </ElFormItem>
    <ElFormItem label="备注">
      <ElInput type="textarea" :maxlength="200" v-model="form.remark" />
    </ElFormItem>
  </ElForm>
</template>
